<template>
<div>
  <el-tabs v-model="editableTabsValue" closable @tab-remove="removeTab" @tab-click="handleClick">
    <el-tab-pane
      v-for="(item) in editableTabs"
      :key="item.id"
      :label="item.text"
      :name="item.id"
    >
    </el-tab-pane>
    <router-view :key="$route.fullPath"></router-view>
  </el-tabs>
  <div v-show="contextMenuVisible">
      <ul :style="{left:left+'px',top:top+'px'}" class="contextmenu">
          <!-- <li><el-button type="text" @click="curTabReload()" size="mini">重新加载</el-button></li> -->
          <li><el-button type="text" @click="closeAllTabs()" size="mini">关闭所有</el-button></li>
          <!-- <li><el-button type="text" @click="closeOtherTabs('left')" :disabled="isDisabledCloseLeftBtnFlag" size="mini">关闭左边</el-button></li>
          <li><el-button type="text" @click="closeOtherTabs('right')" :disabled="isDisabledCloseRightBtnFlag" size="mini">关闭右边</el-button></li> -->
          <li><el-button type="text" @click="closeOtherTabs('other')" size="mini">关闭其他</el-button></li>
      </ul>
  </div>
  
</div>
</template>
<script>
  // import nav from "../demo/NavMunu"
  // import untree from "../demo/elTree"
  import Vue from 'vue'
  export default {
    props:["msg"],
    data() {
      return {
        normalizedSize:{},
        routData:{},
        treeData:{},
        aa:false,
        editableTabsValue: '1',
        editableTabs: [{
          text: '开始',
          id: 'user',
        }],
        // tabIndex:"2",
        contextMenuVisible:false,
        isDisabledCloseLeftBtnFlag:true,
        isDisabledCloseRightBtnFlag:true,
        left:'',
        top:'',
      }

    },
    created(){
      this.routData=this.$route.query
      this.addTab()
    },
    watch:{
      '$route.path':function(newVal,oldVal){
        console.log(newVal)
        console.log(oldVal)
        if(newVal){
          this.routData=this.$route.query
          
          this.addTab()
        }
      },
    },
    created(){
      console.log(this.editableTabs)
    },
    mounted(){
      console.log(this.editableTabs)
      this.bindRightClickMenu()
    },
    methods:{
      addTab(targetName) {
        this.editableTabsValue=this.routData.id
        // console.log(this.editableTabs)
        this.compare(this.editableTabs,this.routData)
        // console.log(this.editableTabs)
      },
      removeTab(targetName) {
         let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if(tabs.length==1){
          this.$message.warning("保留最后一个")
          return
        }else{
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.id === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.id;
                }
              }
            });
          }
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.id !== targetName);
        this.$router.push({
            path:`/doremi/${activeName}`,
            query:{
              id:activeName,
            }
          })
      },
      handleClick(e){
        console.log(e)
          this.$router.push({
            path:`/doremi/tree${e.name}`,
            query:{
              id:e.name,
              text:e.label
            }
          })
        },
      bindRightClickMenu(){
        // 使用原生js 为单个dom绑定鼠标右击事件
        let tab_top_dom = document.body.getElementsByClassName("el-tabs__nav-scroll")
        for(let i = 0;i<tab_top_dom.length;++i){
            tab_top_dom[i].oncontextmenu = this.openContextMenu
        }
      },
      //右键事件
      openContextMenu(e) {
          e.preventDefault(); //防止默认菜单弹出
          this.contextMenuVisible=true
          this.left = e.clientX+40;
          this.top = 80;
          document.addEventListener('click', this.foo)
      },
      // 关闭所有标签页
      closeAllTabs() {
        this.editableTabs.splice(0,this.editableTabs.length)//删除所有tab标签
        this.editableTabs.push({
          text: '开始',
          id: '1',
        })
        this.$router.push({
          path:`/doremi/1`,
          query:{
            id:"1",
          }
        })
        this.closeContextMenu()
      },
      // 关闭其它标签页
      closeOtherTabs(par) {
          let currTabIndex = 0;
          for(;currTabIndex<this.editableTabs.length;++currTabIndex){
              if(this.editableTabs[currTabIndex].id == this.editableTabsValue){
                  break;
              }
          }
          let curTabTitle = this.editableTabs[currTabIndex].id
          // console.log(currTabIndex)
          // console.log(curTabTitle)
          this.editableTabs.splice(0,currTabIndex)
          this.editableTabs.splice(currTabIndex+1,this.editableTabs.length)
          this.editableTabs.unshift({
            text: '开始',
            id: '1',
          })
          this.closeContextMenu()
          this.$router.push({
            path:`/doremi/${curTabTitle}`
          })
      },
      // 关闭contextMenu
      closeContextMenu() {
          this.contextMenuVisible = false;
      },
      foo() { // 取消鼠标监听事件 菜单栏
          this.contextMenuVisible = false
          document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
        },
      //数组对象去重函数
      compare(data,addData){      //data是数组，tlid是想要添加进去的内容。     

        var flag=false;//设置一个flag标记。
        for (var i in data){
          //、、循环数组data对比里面的tlid
              if(data[i].id == addData.id){  
                //z这里一定要写找相同的，不然如果你找的不同的，他可能和第一个比不同，第二个相同了，你就不能添加进去的。
                    flag=true;  //如果找到相同的让flag为true
              }
          }  //循环结束。
          if(flag==false){  
            //比对完所有的tlid以后看看是否falg为false。如果还是false说明没有找到相同的，
            //如果为true说明有相同的。只有没有相同的时候才添加
                data.push(addData);
          }

      }
        
    }
  }
</script>

<style scoped>
.contextmenu {
        width: 100px;
        margin: 0;
        border: 1px solid #ccc;
        background: #fff;
        z-index: 3000;
        position: absolute;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 14px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    }
    .contextmenu li {
        margin: 0;
        padding: 0px 22px;

    }
    .contextmenu li:hover {
        background: #f2f2f2;
        cursor: pointer;
    }
    .contextmenu li button{
       color: #2c3e50;
    }
</style>


